<template>
   <div style="display: inline-block;">
  <span v-if="syncToApp || syncToLocal">
    <j-third-app-dropdown v-if="enabledTypes.wechatEnterprise" type="wechatEnterprise" name="企微" v-bind="bindAttrs" v-on="bindEvents"/>
    <j-third-app-dropdown v-if="enabledTypes.dingtalk" type="dingtalk" name="钉钉" v-bind="bindAttrs" v-on="bindEvents"/>
  </span>
  <span v-else>未设置任何同步方向</span>
      <sys-third-org-modal ref="sysThirdOrgRef" @ok="modalHandleOk"></sys-third-org-modal>
  </div>
</template>

<script>
import { getAction } from '@/api/manage'
import { cloneObject } from '@/utils/util'
import JThirdAppDropdown from './JThirdAppDropdown'
import SysThirdOrgModal from './modules/SysThirdOrgModal'

const backEndUrl = {
  // 获取启用的第三方App
  getEnabledType: '/sys/thirdApp/getEnabledType',
  // 企业微信
  wechatEnterprise: {
    user: '/sys/thirdApp/sync/wechatEnterprise/user',
    depart: '/sys/thirdApp/sync/wechatEnterprise/depart',
  },
  // 钉钉
  dingtalk: {
    user: '/sys/thirdApp/sync/dingtalk/user',
    depart: '/sys/thirdApp/sync/dingtalk/depart',
  }
}

export default {
  name: 'JThirdAppButton',
  components: {JThirdAppDropdown,SysThirdOrgModal},
  props: {
    // 同步类型，可以是 user、depart
    bizType: {
      type: String,
      required: true,
    },
    // 是否允许同步到第三方APP
    syncToApp: Boolean,
    // 是否允许第三方APP同步到本地
    syncToLocal: Boolean,
    // 选择的行
    selectedRowKeys: Array,
  },
  data() {
    return {
      enabledTypes: {},
      attrs: {
        dingtalk: {},
      },
      type:'',
      direction:'',
    }
  },
  computed: {
    bindAttrs() {
      return {
        syncToApp: this.syncToApp,
        syncToLocal: this.syncToLocal
      }
    },
    bindEvents() {
      return {
        'to-app': this.onToApp,
        'to-local': this.onToLocal,
      }
    },
  },
  created() {
    this.loadEnabledTypes()
  },
  methods: {
    handleMenuClick() {
      console.log(arguments)
    },
    onToApp(e) {
      this.doSync(e.type, '/toApp')
    },
    onToLocal(e) {
      this.doSync(e.type, '/toLocal')
    },
    // 获取启用的第三方App
    async loadEnabledTypes() {
      this.enabledTypes = await loadEnabledTypes()
    },
    //同步钉钉到本地
    doSync(type, direction){
      this.type = type
      this.direction = direction
      //同步类型 
      if(this.bizType ==='user'){
        //选择三方组织
        this.$refs.sysThirdOrgRef.add();
        this.$refs.sysThirdOrgRef.title = "同步";
        this.$refs.sysThirdOrgRef.disableSubmit = false;
      }else{
        this.doSyncSubmit(this.type,this.direction)
      }
    },
    modalHandleOk(code){
      this.doSyncSubmit(this.type,this.direction,code)
    },
    doSyncSubmit(type, direction,code) {
      debugger
      let urls = backEndUrl[type]
      if (!(urls && urls[this.bizType])) {
        console.warn('配置出错')
        return
      }
      let url = urls[this.bizType] + direction
      let selectedRowKeys = this.selectedRowKeys
      // let content = '确定要开始同步全部数据吗？可能花费较长时间！'
       const userStr = (<div>
            <p>确定要开始同步全部数据吗？可能花费较长时间！</p>
            <p style="color:red;">新员工填写个人档案，需先同步钉钉到本地</p>
            </div>)
       let content = this.bizType=='user'?userStr:'确定要开始同步全部数据吗？可能花费较长时间！'
      if (Array.isArray(selectedRowKeys) && selectedRowKeys.length > 0) {
         content = `确定要开始同步这 ${selectedRowKeys.length} 项吗？`
      } else {
        selectedRowKeys = []
      }
      return new Promise((resolve, reject) => {
        let model = this.$confirm({
          title: '同步',
          content,
          onOk: () => {
            model.update({
              keyboard: false,
              okText: '同步中…',
              cancelButtonProps: {props: {disabled: true}}
            })
            let parma={
              ids: selectedRowKeys.join(','),
              code:code
            }  
            //如果是bizType是部门得话，删除code参数
            if(this.bizType=='depart'){
              delete parma.code
            }
            return getAction(url,parma).then(res => {
              let options = null
              if (res.result) {
                options = {
                  width: 600,
                  title: res.message,
                  content: (h) => {
                    let nodes
                    let successInfo = [
                      `成功信息如下：`,
                      this.renderTextarea(h, res.result.successInfo.map((v, i) => `${i + 1}. ${v}`).join('\n')),
                    ]
                    if (res.success) {
                      nodes = [
                        ...successInfo,
                        h('br'),
                        `无失败信息！`,
                      ]
                    } else {
                      nodes = [
                        `失败信息如下：`,
                        this.renderTextarea(h, res.result.failInfo.map((v, i) => `${i + 1}. ${v}`).join('\n')),
                        h('br'),
                        ...successInfo,
                      ]
                    }
                    return nodes
                  }
                }
              }
              if (res.success) {
                if (options != null) {
                  this.$success(options)
                } else {
                  this.$message.success(res.message)
                }
                this.$emit('sync-ok')
              } else {
                if (options != null) {
                  this.$warning(options)
                } else {
                  this.$message.warning(res.message)
                }
                this.$emit('sync-error')
              }
            }).catch(() => model.destroy()).finally(() => {
              resolve()
              this.$emit('sync-finally', {
                type,
                direction,
                isToApp: direction === '/toApp',
                isToLocal: direction === '/toLocal',
              })
            })
          },
          onCancel() {
            resolve()
          },
        })
      })
    },
    // 开始同步第三方App
    // doSync(type, direction) {
    //   let urls = backEndUrl[type]
    //   if (!(urls && urls[this.bizType])) {
    //     console.warn('配置出错')
    //     return
    //   }
    //   let url = urls[this.bizType] + direction
      
    //   let selectedRowKeys = this.selectedRowKeys
    //   // let content = '确定要开始同步全部数据吗？可能花费较长时间！'
    //    const userStr = (<div>
    //         <p>确定要开始同步全部数据吗？可能花费较长时间！</p>
    //         <p style="color:red;">新员工填写个人档案，需先同步钉钉到本地</p>
    //         </div>)
    //    let content = this.bizType=='user'?userStr:'确定要开始同步全部数据吗？可能花费较长时间！'
    //   if (Array.isArray(selectedRowKeys) && selectedRowKeys.length > 0) {
    //     content = `确定要开始同步这 ${selectedRowKeys.length} 项吗？`
    //   } else {
    //     selectedRowKeys = []
    //   }
    //   return new Promise((resolve, reject) => {
    //     let model = this.$confirm({
    //       title: '同步',
    //       content,
    //       onOk: () => {
    //         model.update({
    //           keyboard: false,
    //           okText: '同步中…',
    //           cancelButtonProps: {props: {disabled: true}}
    //         })
    //         return getAction(url, {
    //           ids: selectedRowKeys.join(',')
    //         }).then(res => {
    //           let options = null
    //           if (res.result) {
    //             options = {
    //               width: 600,
    //               title: res.message,
    //               content: (h) => {
    //                 let nodes
    //                 let successInfo = [
    //                   `成功信息如下：`,
    //                   this.renderTextarea(h, res.result.successInfo.map((v, i) => `${i + 1}. ${v}`).join('\n')),
    //                 ]
    //                 if (res.success) {
    //                   nodes = [
    //                     ...successInfo,
    //                     h('br'),
    //                     `无失败信息！`,
    //                   ]
    //                 } else {
    //                   nodes = [
    //                     `失败信息如下：`,
    //                     this.renderTextarea(h, res.result.failInfo.map((v, i) => `${i + 1}. ${v}`).join('\n')),
    //                     h('br'),
    //                     ...successInfo,
    //                   ]
    //                 }
    //                 return nodes
    //               }
    //             }
    //           }
    //           if (res.success) {
    //             if (options != null) {
    //               this.$success(options)
    //             } else {
    //               this.$message.success(res.message)
    //             }
    //             this.$emit('sync-ok')
    //           } else {
    //             if (options != null) {
    //               this.$warning(options)
    //             } else {
    //               this.$message.warning(res.message)
    //             }
    //             this.$emit('sync-error')
    //           }
    //         }).catch(() => model.destroy()).finally(() => {
    //           resolve()
    //           this.$emit('sync-finally', {
    //             type,
    //             direction,
    //             isToApp: direction === '/toApp',
    //             isToLocal: direction === '/toLocal',
    //           })
    //         })
    //       },
    //       onCancel() {
    //         resolve()
    //       },
    //     })
    //   })
    // },
    renderTextarea(h, value) {
      return h('a-textarea', {
        props: {
          value: value,
          readOnly: true,
          autosize: {minRows: 5, maxRows: 10},
        },
        style: {
          // 关闭textarea的自动换行，使其可以左右滚动
          whiteSpace: 'pre',
          overflow: 'auto',
        }
      })
    }
  },
}

// 启用了哪些第三方App（在此缓存）
let enabledTypes = null

// 获取启用的第三方App
export async function loadEnabledTypes() {
  // 获取缓存
  if (enabledTypes != null) {
    return cloneObject(enabledTypes)
  } else {
    let {success, result} = await getAction(backEndUrl.getEnabledType)
    if (success) {
      // 在此缓存
      enabledTypes = cloneObject(result)
      return result
    } else {
      console.warn('getEnabledType查询失败：', res)
    }
  }
  return {}
}
</script>

<style scoped>

</style>